<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in list" :key='item.id'>
                <input type="checkbox"> <span>{{item.title}}</span>
            </li>
        </ul>
        <button @click="add">点我试试</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                list: [{
                    id: 1,
                    title: 'apple'
                }, {
                    id: 2,
                    title: 'orange'
                }, {
                    id: 3,
                    title: 'lemon'
                }]
            },
            methods: {
                add: function() {
                    var newObj = {
                        id: 4,
                        title: 'banana'
                    }
                    this.list.unshift(newObj)
                }
            }
        });
        // 点击按钮, 添加新的元素到list中
        // 先点击orange的复选框, 然后再点击添加按钮,发生什么问题?如何解决?
    </script>
</body>

</html>